<template>
	<div id="waterDetail">
		<el-table :data="waterList" stripe style="width: 100%">
			<el-table-column prop="workerName" label="送水工名称" width="360">
			</el-table-column>
			<el-table-column prop="custDetails" label="客户列表" width="360">
			</el-table-column>
			<el-table-column prop="sendWaterCount" label="送水总量" width="360">
			</el-table-column>
		</el-table>
		<el-pagination background layout="sizes,prev, pager, next,jumper,->,total" :page-size.sync="pageSize"
			:current-page.sync="pageNum" :page-sizes="[10,20]" :total="total" :hide-on-single-page="true"
			@current-change="listWater" @size-change="listWater">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				waterList: [],
				// 新增加 总行数、当前页、每页个数
				total: 0,
				pageNum: 1,
				pageSize: 10,
			}
		},
		methods: {
			listWater() {
				this.$axios.get('http://localhost:8097/stat/listWaterPage/' + this.pageNum + '/' + this.pageSize)
				.then((resp) => {
					this.waterList = resp.data.responseData.list;
					this.total = resp.data.responseData.total;
					this.pageNum = resp.data.responseData.pageNum;
					this.$message.success("统计送水数量列表响应成功");
				}).catch((error) => {
					this.$message.error("统计送水数量响应失败");
				})
			}
		},
		created() {
			this.listWater();
		}
	}
</script>

<style>
</style>
